<!-- 运输单详情 -->
<template>
  <el-dialog
    title="详情"
    :visible.sync="dialogVisible"
    append-to-body
    width="60%"
    @close="dialogClose"
  >
    <el-tabs v-model="activeName" v-loading="loading">
      <el-tab-pane label="运单信息" name="first">
        <avue-form
          ref="form"
          v-model="transportOrder"
          :option="formOption"
        ></avue-form>
      </el-tab-pane>
      <el-tab-pane label="物料信息" name="second">
        <avue-crud
          :data="transportOrderItems"
          :option="materialOption"
        ></avue-crud>
      </el-tab-pane>
      <el-tab-pane label="运单日志" name="third">
        <avue-crud
          :data="tmTransportLinePoints"
          :option="waybillLogOption"
        ></avue-crud>
      </el-tab-pane>
      <el-tab-pane
        label="签收信息"
        name="fourth"
        v-if="transportOrder.orderType !== 'ZFO6'"
      >
        <avue-form
          ref="signedForm"
          v-model="signedInfo"
          :option="signInfoOption"
          @submit="signInfoOptionSubmit"
        ></avue-form>
      </el-tab-pane>
      <el-tab-pane label="异常信息" name="fifth">
        <avue-crud :data="exceptionRecord" :option="exceptionOption"
          ><template
            slot="exceptionPic"
            slot-scope="{ row }"
            v-if="row.exceptionPic"
          >
            <el-image
              style="height: 50px; width: 50px; margin-right: 10px"
              :src="src"
              v-for="(src, index) in row.exceptionPic.split(';')"
              :key="index"
              :preview-src-list="row.exceptionPic.split(';')"
              z-index="2004"
            >
            </el-image>
          </template>
          <template slot-scope="{ row }" slot="menu">
            <el-button
              type="text"
              size="mini"
              icon="el-icon-edit"
              @click.stop="abnormalCost(row)"
              >异常费用</el-button
            >
          </template>
        </avue-crud>
      </el-tab-pane>
    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </span>
    <!-- 异常费用弹窗 -->
    <abnormalCostList ref="abnormalCostList" @refresh="open(id)" />
  </el-dialog>
</template>
<script>
import {
  getTransportDetail,
  signForReceiptUpdate,
} from "@/api/transportation/demandorder";
import abnormalCostList from "./abnormalCostList";
export default {
  data() {
    return {
      dialogVisible: false,
      activeName: "first",
      loading: false,
      transportOrder: {}, //运单信息
      transportOrderItems: [], //物料信息
      exceptionRecord: [], //异常信息
      tmTransportLinePoints: [], //日志
      signedInfo: {}, //签收信息
      formOption: {
        labelWidth: 180,
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "运输单号",
            prop: "transportNo",
            disabled: true,
          },
          {
            label: "承运商",
            prop: "carrierName",
            disabled: true,
          },
          {
            label: "司机",
            prop: "driverName",
            disabled: true,
          },
          {
            label: "押运员",
            prop: "supercargoName",
            disabled: true,
          },
          {
            label: "车牌号",
            prop: "carNo",
            disabled: true,
          },
          {
            label: "挂车号",
            prop: "bindCarNo",
            disabled: true,
          },
          {
            label: "罐箱类型",
            prop: "tankType",
            disabled: true,
          },
          {
            label: "罐箱号",
            prop: "containerNo",
            disabled: true,
          },
          {
            label: "铅封号",
            prop: "leadSealNumber",
            disabled: true,
          },
          {
            label: "提单号",
            prop: "billOfLadingNumber",
            disabled: true,
          },
          {
            label: "客户名称",
            prop: "customerName",
            disabled: true,
          },
          {
            label: "国际贸易条款",
            prop: "tradeTerms",
            disabled: true,
          },
          {
            label: "国际贸易条款附加信息",
            prop: "tradeTermsItem",
            disabled: true,
          },
          {
            label: "运单状态",
            prop: "transportStatus",
            type: "select",
            props: {
              label: "value",
              value: "key",
            },
            disabled: true,
            dicUrl: `/api/blade-tms/common/SelectEnum?name=waybillStatus`,
          },
          {
            label: "备注",
            prop: "remark",
            disabled: true,
          },
          {
            label: "货运订单",
            prop: "orderNo",
            disabled: true,
          },
          {
            label: "货运订单类型",
            prop: "orderType",
            disabled: true,
          },
          {
            label: "交货单",
            prop: "deliverNo",
            disabled: true,
          },
          {
            label: "订单号",
            prop: "orderNumber",
            disabled: true,
          },
          {
            label: "源位置",
            prop: "startLocationNo",
            disabled: true,
          },
          {
            label: "源位置名称",
            prop: "startLocationName",
            disabled: true,
          },
          {
            label: "源位置区域（省份）",
            prop: "startLocationArea",
            disabled: true,
          },
          {
            label: "源位置城市",
            prop: "startLocationCity",
            disabled: true,
          },
          {
            label: "源位置街道",
            prop: "startLocationStreet",
            disabled: true,
          },
          {
            label: "目标位置",
            prop: "targetLocationNo",
            disabled: true,
          },
          {
            label: "目标位置名称",
            prop: "targetLocationName",
            disabled: true,
          },
          {
            label: "目标位置区域（省份）",
            prop: "targetLocationArea",
            disabled: true,
          },
          {
            label: "目标位置城市",
            prop: "targetLocationCity",
            disabled: true,
          },
          {
            label: "目标位置街道",
            prop: "targetLocationStreet",
            disabled: true,
          },
          {
            label: "计划提货日期",
            prop: "planGetGoodsDateStart",
            disabled: true,
          },
          {
            label: "计划收货日期",
            prop: "planGetGoodsDateEnd",
            disabled: true,
          },
          {
            label: "运输方式",
            prop: "ysfs_des",
            disabled: true,
          },
          {
            label: "联系人",
            prop: "khlxr",
            disabled: true,
          },
          {
            label: "联系方式",
            prop: "khlxfs",
            disabled: true,
          },
          {
            label: "提货地址",
            prop: "thdz",
            disabled: true,
          },
          {
            label: "包装方式",
            prop: "bzfs",
            disabled: true,
          },
          {
            label: "包装数量",
            prop: "bzsl",
            disabled: true,
          },
        ],
      },
      materialOption: {
        menu: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        column: [
          {
            label: "行项目号",
            prop: "itemNo",
          },
          {
            label: "物料",
            prop: "matCode",
          },
          {
            label: "物料描述",
            prop: "matDesc",
          },
          {
            label: "交货数量",
            prop: "num",
          },
          {
            label: "交货数量单位",
            prop: "unit",
          },
        ],
      },
      exceptionOption: {
        addBtn: false,
        editBtn: false,
        delBtn: false,
        refreshBtn: false,
        columnBtn: false,
        column: [
          {
            label: "运单号",
            prop: "parentId",
          },
          {
            label: "异常类型",
            prop: "exceptionClass",
          },
          {
            label: "异常原因",
            prop: "abnormal",
          },
          {
            label: "异常时间",
            prop: "exceptionDate",
          },
          {
            label: "异常图片",
            prop: "exceptionPic",
          },
          {
            label: "上传人",
            prop: "operator",
          },
          {
            label: "备注",
            prop: "remark",
          },
        ],
      },
      waybillLogOption: {
        menu: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        column: [
          {
            label: "运单状态",
            prop: "transport",
          },
          {
            label: "时间",
            prop: "createTime",
          },
          {
            label: "操作人",
            prop: "operator",
          },
          // {
          //   label: "车辆经纬度",
          //   prop: "location",
          // },
        ],
      },
      signInfoOption: {
        labelWidth: 180,
        submitBtn: false,
        submitText: "保存",
        emptyBtn: false,
        disabled: true,
        column: [
          {
            label: "签收时间",
            prop: "signDate",
            span: 12,
            type: "datetime",
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            rules: [
              {
                required: true,
                message: "请选择签收时间",
                trigger: "change",
              },
            ],
          },
          {
            label: "签收数量",
            prop: "num",
            type: "number",
            span: 12,
            rules: [
              {
                required: true,
                message: "请选择签收数量",
                trigger: "change",
              },
            ],
          },
          {
            label: "备注",
            prop: "remark",
            span: 12,
          },
          {
            label: "签收单上传",
            prop: "signPic",
            type: "upload",
            span: 24,
            listType: "picture-img",
            propsHttp: {
              res: "data",
              name: "originalName",
              url: "link",
            },
            action: "/api/blade-resource/oss/endpoint/put-file-attach",
            rules: [
              {
                required: true,
                message: "请上传签收单",
                trigger: "change",
              },
            ],
          },
          {
            label: "交付检查表上传",
            prop: "overPic",
            type: "upload",
            span: 24,
            listType: "picture-img",
            propsHttp: {
              res: "data",
              name: "originalName",
              url: "link",
            },
            action: "/api/blade-resource/oss/endpoint/put-file-attach",
            rules: [
              {
                required: true,
                message: "请上传交付检查表",
                trigger: "change",
              },
            ],
          },
        ],
      },
      id: "",
      orderType: "",
    };
  },
  components: { abnormalCostList },
  computed: {},
  watch: {
    "transportOrder.transportStatus"(val) {
      if (val === "completed") {
        this.signInfoOption.submitBtn = true;
        this.signInfoOption.disabled = false;
      }
    },
  },
  methods: {
    open(id, orderType) {
      this.id = id;
      this.orderType = orderType;
      this.dialogVisible = true;
      this.loading = true;
      this.$nextTick(() => {
        if (this.$refs.signedForm) {
          this.$refs.signedForm.resetForm();
        }
        getTransportDetail({ id: id }).then((res) => {
          this.loading = false;
          if (res.data.code === 200 && res.data.success) {
            const data = res.data.data;
            this.transportOrder = data.transportOrder;
            this.transportOrderItems = data.transportOrderItems;
            this.exceptionRecord = data.exceptionRecords;
            this.tmTransportLinePoints = data.tmTransportLinePoints;
            this.signedInfo = data.signedInfo;
          }
        });
      });
    },
    dialogClose() {
      this.activeName = "first";
    },
    //异常费用
    abnormalCost(row) {
      this.$refs.abnormalCostList.open(
        row.id,
        row.alreadyExceptionBill,
        this.orderType
      );
    },
    //保存签收信息
    signInfoOptionSubmit(form, done) {
      signForReceiptUpdate({ ...form }).then(
        (res) => {
          done();
          if (res.data.code === 200 && res.data.success) {
            this.$message.success(res.data.msg);
          }
        },
        (error) => {
          done();
          window.console.log(error);
        }
      );
    },
  },
};
</script>

<style></style>
